<!--
 * @Date: 2023-04-23 11:36:07
 * @LastEditTime: 2023-04-24 12:22:28
 * @FilePath: /nlk/src/views/KLine/components/countInfo.vue
 * 介绍:
-->
<script lang="ts" setup>
import { formatNumber } from "@@/utils/tools/tools";
import { omitText } from "@@/utils/tools/project";
import { NlkLineCharts } from "@@/api/page/KLine";
import { divide, multiply } from "mathjs";

const props = defineProps<{
  nlkData: NlkLineCharts.Res | undefined;
  coin: CoinInfo;
}>();

const $change = computed(() => {
  const prices = props.nlkData?.kline.prices;
  if (!prices || !(prices.length >= 2)) return;
  /**昨天价格 */
  const yesterday = Number(prices[prices.length - 2]);
  /**今天价格 */
  const today = Number(prices[prices.length - 1]);
  const change = today - yesterday;
  return multiply(divide(change, yesterday), 100);
});
</script>
<template>
  <div class="T-A-C">
    <div class="T-S-sm C-T3">{{ $t("shi-shi-jian-kong-yi-kai-qi") }}</div>
  </div>
  <Cgrid class="T-S-sm" col="2" repeat="1fr">
    <Ccard class="countCard T-A-C" bg="linear-gradient(90deg,#6DA1F9,#5F5DE8)">
      <div>{{ $t("zong-liang") }}<span>NLK</span></div>
      <div>$ {{ formatNumber(nlkData?.nlk.total) }}</div>
    </Ccard>
    <Ccard class="countCard T-A-C" bg="linear-gradient(90deg,#F59A24,#F15430)">
      <div>{{ $t("yu-liang") }}<span>NLK</span></div>
      <div>${{ formatNumber(nlkData?.nlk.last) }}</div>
    </Ccard>
  </Cgrid>

  <Ccard bg="var(--C-OB1)" class="coinInfo auto-MT-xs">
    <div class="C-success">${{ formatNumber(nlkData?.coin.price, 4) }}</div>
    <div class="flex-A-C T-S-xs">
      <Ctag>{{ formatNumber($change) }}%</Ctag>
      <span class="ML-sm">
        {{ formatNumber(nlkData?.coin.price, 4) }}（USDT）
      </span>
    </div>
    <div class="coinInfo_content flex-J-SB T-S-xs MT-lg">
      <Cgrid col="2">
        <CgridItem justify="start">
          {{ $t("shi-zhi") }}
        </CgridItem>
        <CgridItem justify="end">
          ${{ formatNumber(nlkData?.nlk.market_value) }}
        </CgridItem>
        <CgridItem justify="start">
          {{ $t("liu-dong-xing") }}<span>:</span>
        </CgridItem>
        <CgridItem justify="end">
          ${{ formatNumber(nlkData?.nlk.liquidity) }}
        </CgridItem>
        <CgridItem justify="start">
          {{ $t("chi-bi-di-zhi-shu") }}<span>:</span>
        </CgridItem>
        <CgridItem justify="end">
          {{ formatNumber(nlkData?.nlk.address, 0) }}
        </CgridItem>
      </Cgrid>
      <Cgrid class="ML-lg" col="2">
        <CgridItem justify="start">
          {{ $t("jiao-yi-e") }}<span>(24h):</span>
        </CgridItem>
        <CgridItem justify="end">
          ${{ formatNumber(nlkData?.nlk.volume) }}
        </CgridItem>
        <CgridItem justify="start">
          {{ $t("jiao-yi-ci-shu") }}<span>(24h):</span>
        </CgridItem>
        <CgridItem justify="end">
          ${{ formatNumber(nlkData?.nlk.times) }}
        </CgridItem>
        <CgridItem justify="start" col="1 / span 2">
          <CcopyText :copy-text="coin.contract_addr!">
            {{ omitText(coin.contract_addr) }}
          </CcopyText>
        </CgridItem>
      </Cgrid>
    </div>
  </Ccard>
</template>
<style lang="less" scoped></style>
